/*
 * @Description: 关联弹窗
 * @Author: ZzT
 * @Date: 2023-03-10 15:13:46
 * @LastEditTime: 2023-03-10 16:35:55
 */
import { Button, Modal, Space, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import { useSearchResultContext } from '../../contexts/SearchResultContext';

const Relation = (props: any) => {
  const { visible, onClose, data, title, listQuery, setListQuery } = props;
  const { levelFilter } = useSearchResultContext();
  const [total, setTotal] = useState(0);
  const [tableData, setTableData] = useState([]);
  useEffect(() => {
    setTableData(data.results);
    setTotal(data.totalCount);
  }, [visible]);
  console.log('data', data.results);

  const [selectItems, setSelectKey] = useState([]);
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state: any) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: any) => {
    console.log('selectedRowKeys', selectedRowKeys);
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  const colums: ColumnsType<any> = [
    {
      title: '序号',
      align: 'center',
      key: 'id',
      dataIndex: 'id'
    },
    {
      title: '全宗',
      align: 'center',
      key: 'targetFondsName',
      dataIndex: 'targetFondsName'
    },
    {
      title: '档案类型',
      align: 'center',
      key: 'targetArchiveTypeName',
      dataIndex: 'targetArchiveTypeName'
    },
    {
      title: '档号',
      align: 'center',
      key: 'targetArcNo',
      dataIndex: 'targetArcNo'
    },
    {
      title: '级别',
      align: 'center',
      key: 'targetLevel',
      dataIndex: 'targetLevel',
      render: (text) => <span>{levelFilter(text)}</span>
    },
    {
      title: '操作',
      align: 'center',
      key: 'action',
      render: (text, record) => (
        <>
          <Button type="link">查看</Button>
        </>
      )
    }
  ];
  return (
    <>
      <Modal
        visible={visible}
        onCancel={onClose}
        footer={[
          <Button key={'close'} onClick={() => onClose()}>
            关闭
          </Button>
        ]}
        title={
          <div style={{ marginRight: '5px' }}>
            与“<span dangerouslySetInnerHTML={{ __html: title }}></span>”关联的档案
          </div>
        }
        width={800}
      >
        <Space>
          <Button>收藏</Button>
          <Button>档案篮</Button>
          <Button>排序</Button>
          <Button>申请</Button>
          <Button>打印</Button>
          <Button>导出</Button>
          <Button>下载</Button>
        </Space>
        <Table
          rowKey={'id'}
          columns={colums}
          rowSelection={rowSelection}
          dataSource={tableData}
          bordered
          pagination={{
            current: listQuery.pageNo,
            pageSize: listQuery.pageSize,
            total,
            onChange: pageChange
          }}
        />
      </Modal>
    </>
  );
};
export default Relation;
